<template>
  <div>
    <!-- 编辑区 用户未登录看不见 登录可见！ -->
    <div class="editArea">
      <!-- <div style="margin: 20px 0;"></div> -->

      <el-input
        id="input"
        type="textarea"
        placeholder="AHuer一起来AnTalk"
        v-model="textarea"
        maxlength="200"
        show-word-limit
        :autosize="{ minRows: 3 }"
      >
      </el-input>

      <div class="editBottom">
        <el-button
          type="warning"
          plain
          round
          size="mini"
          @click="upload"
          style="font-size: 15px"
          >发布</el-button
        >
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { success, fail, verify_fail} from "../plugins/notification";

export default {
  name: "PageCenter",
  data() {
    return {
      textarea: "",
      plain: false,
    };
  },
  methods: {
    async upload() {
      // 认证
      await this.$http
        .get("/auth/verify")
        .then(async () => {
          const content = this.textarea;
          const uid = this.$store.state.uid;
          let info = await this.$http.post(
            "/normal/pushTalk",
            {},
            {
              params: {
                uid,
                content,
              },
            }
          );
          if (info.status == 200) {
            success();
            this.textarea = "";
            this.$router.replace("/refresh"); // refresh curr route
          } else {
            fail();
          }
        })
        .catch((e) => {
          window.sessionStorage.clear()
          // this.$store.state = {}
          this.$store.commit("resetAll")
          verify_fail()
        });
    },
  },
};
</script>

<style lang="less">
.editArea {
  margin-top: 0.5%;
  margin-bottom: 5px;
  padding-top: 10px;
  background-color: #ffffff;
  border-radius: 3px;
}

#input {
  font-size: 14px;
  background: #f0f1f4;
  border-radius: 8px;
  margin: auto;
  width: 90%;
}

.editBottom {
  padding-top: 2%;
  padding-bottom: 2%;
  display: flex;
  margin-left: 85%;
}

/* 改变notification组件的默认样式 */
.el-notification {
  position: fixed;
  top: 7% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.el-notification.right {
  top: 7% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.el-notification.left {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
</style>